<template>
  <a-form-model ref="form" :model="formData" :rules="rules">
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="申报名称(中文)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="declareNameCn">
          <a-input v-model="formData.declareNameCn" placeholder="请输入中文申报名称" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="申报名称(英文)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="declareNameEn">
          <a-input v-model="formData.declareNameEn" placeholder="请输入英文申报名称" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="申报单价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="declarePrice">
          <a-input-number
            v-model="formData.declarePrice"
            placeholder="请输入申报单价"
            :min="0"
            :max="999999.99"
            :precision="2"
            style="width: 80%"
          ></a-input-number
          ><span class="input-number-unit">USD</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="海关编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customsCode">
          <a-input v-model="formData.customsCode" placeholder="请输入海关编码" :maxLength="50"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="报关税率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customsRate">
          <a-input-number
            v-model="formData.customsRate"
            placeholder="请输入报关税率"
            :min="0"
            :max="100"
            :precision="2"
            style="width: 80%"
          ></a-input-number
          ><span class="input-number-unit">%</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="材质(中文)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCn">
          <a-input v-model="formData.materialCn" placeholder="请输入材质(中文)" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="材质(英文)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialEn">
          <a-input v-model="formData.materialEn" placeholder="请输入材质(英文)" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="说明(中文)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarkCn">
          <a-input v-model="formData.remarkCn" placeholder="请输入说明(中文)" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="说明(英文)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarkEn">
          <a-input v-model="formData.remarkEn" placeholder="请输入说明(英文)" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="原产国" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="makeCountry">
          <a-input v-model="formData.makeCountry" placeholder="请输入原产国" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="原产地" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="makeAddress">
          <a-input v-model="formData.makeAddress" placeholder="请输入原产地" :maxLength="255"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="产品属性" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="attribute">
          <j-search-select-tag-new
            v-model="formData.attribute"
            :dictOptions="optionsAttribute"
            placeholder="请选择产品属性"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="其他属性" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="otherAttribute">
          <j-search-select-tag-new
            v-model="formData.otherAttribute"
            dictCode="archive_other_attribute"
            placeholder="请选择其他属性"
            :multiple="true"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="电池容量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="batteryCapacity">
          <a-input-number
            v-model="formData.batteryCapacity"
            placeholder="请输入电池容量"
            :min="0"
            :max="999999.99"
            :precision="2"
            style="width: 80%"
          ></a-input-number
          ><span class="input-number-unit">Wh</span>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="申报备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="declareRemark">
          <a-textarea v-model="formData.declareRemark" rows="4" placeholder="请输入申报备注" :maxLength="128" />
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'ArchiveInfoCustomsForm',
  props: {
    // 要编辑的产品档案采购信息
    defaultData: {
      type: Object,
    },
  },
  data() {
    return {
      formData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      rules: {
        declareNameCn: [{ required: true, message: '请输入申报名称(中文)!' }],
        declareNameEn: [{ required: true, message: '请输入申报名称(英文)!' }],
        declarePrice: [{ required: true, message: '请输入申报单价!' }],
      },
      optionsAttribute: [], // 产品属性下拉选项
    }
  },
  watch: {
    defaultData: {
      handler(val) {
        // 只要有值就赋值给formData
        if (val) {
          const newData = JSON.parse(JSON.stringify(val)) // 深拷贝，避免直接引用导致数据污染
          this.formData = newData.custom
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 加载下拉选项
    loadOptions() {
      getAction(`/hzkj-product/product/archive/archiveAttributeData/list`, {
        pageNo: 1,
        pageSize: 1000,
      }).then((res) => {
        if (res.success) {
          this.optionsAttribute = res.result.records.map((item) => ({
            text: item.name,
            value: item.id,
          }))
        } else {
          this.$message.warning(res.message)
        }
      })
    },
  },
  created() {
    this.loadOptions() // 加载下拉选项
  },
}
</script>

<style lang="less" scoped>
.input-number-unit {
  display: inline-block;
  margin-left: -2px;
  width: 20%;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 0 4px 4px 0;
}
</style>
